/**
 * @file
 * @description 个人中心
 * **/
import Account from '../../layouts/Account';
import './index.scss';
import { SketchOutlined, SettingOutlined, EnvironmentOutlined, RightOutlined } from '@ant-design/icons';
import { getGoodsList } from '../../api/member';
import { useEffect, useState } from 'react';


export default () => {

    /**
     * 猜你喜欢的数据
     */
    const [list, setList] = useState([]);

    /**
     *获取猜你喜欢的数据
     */
    const goodsList = async () => {
        try {
            const data = await getGoodsList();
            setList(data);
        } catch (error) { }
    }
    useEffect(() => {
        goodsList()
    }, [])


    return (
        <Account>
            {/*个人中心  */}
            <div className="member_home">
                <div className="home_overview">
                    <div className="user_meta">
                        <img src={require("../../assets/images/图像.jpg")} alt="" />
                        <h4>yyds</h4>
                    </div>
                    <div className="item">
                        <a href="#/">
                            <SketchOutlined className="iconfont" />
                            <p>会员中心</p>
                        </a>
                        <a href="#/">
                            <SettingOutlined className="iconfont" />
                            <p>安全设置</p>
                        </a>
                        <a href="#/">
                            <EnvironmentOutlined className="iconfont" />
                            <p>地址管理</p>
                        </a>
                    </div>
                </div>
            </div>
            {/* 我的收藏 */}
            <div className="home_panel">
                <div className="header">
                    <h4>我的收藏</h4>
                    <a href="/">查看全部&ensp;<RightOutlined /></a>
                </div>
                <ul className="goods_list">
                    <li className="goods_item">
                        <img src={require('../../assets/images/clothes_goods_登山鞋.jpg')} alt="" />
                        <p className="name">关时目去海红院都无场价地式</p>
                        <p className="desc">空其华义采大圆约素引</p>
                        <p className="price">￥150.23</p>
                    </li>
                    <li className="goods_item">
                        <img src={require('../../assets/images/clothes_goods_登山鞋.jpg')} alt="" />
                        <p className="name">关时目去海红院都无场价地式</p>
                        <p className="desc">空其华义采大圆约素引</p>
                        <p className="price">￥150.23</p>
                    </li>
                    <li className="goods_item">
                        <img src={require('../../assets/images/clothes_goods_登山鞋.jpg')} alt="" />
                        <p className="name">关时目去海红院都无场价地式</p>
                        <p className="desc">空其华义采大圆约素引</p>
                        <p className="price">￥150.23</p>
                    </li>
                    <li className="goods_item">
                        <img src={require('../../assets/images/clothes_goods_登山鞋.jpg')} alt="" />
                        <p className="name">关时目去海红院都无场价地式</p>
                        <p className="desc">空其华义采大圆约素引</p>
                        <p className="price">￥150.23</p>
                    </li>
                </ul>
            </div>
            {/* 我的足迹 */}
            <div className="home_panel">
                <div className="header">
                    <h4>我的足迹</h4>
                    <a href="/">查看全部&ensp;<RightOutlined /></a>
                </div>
                <ul className="goods_list">
                    <li className="goods_item">
                        <img src={require('../../assets/images/火锅.jpg')} alt="" />
                        <p className="name">自煮火锅不排队 麦饭石不粘鸳鸯火锅</p>
                        <p className="desc">清汤鲜香 红汤劲爽</p>
                        <p className="price">¥159.00</p>
                    </li>
                    <li className="goods_item">
                        <img src={require('../../assets/images/火锅.jpg')} alt="" />
                        <p className="name">自煮火锅不排队 麦饭石不粘鸳鸯火锅</p>
                        <p className="desc">清汤鲜香 红汤劲爽</p>
                        <p className="price">¥159.00</p>
                    </li>
                    <li className="goods_item">
                        <img src={require('../../assets/images/火锅.jpg')} alt="" />
                        <p className="name">自煮火锅不排队 麦饭石不粘鸳鸯火锅</p>
                        <p className="desc">清汤鲜香 红汤劲爽</p>
                        <p className="price">¥159.00</p>
                    </li>
                    <li className="goods_item">
                        <img src={require('../../assets/images/火锅.jpg')} alt="" />
                        <p className="name">自煮火锅不排队 麦饭石不粘鸳鸯火锅</p>
                        <p className="desc">清汤鲜香 红汤劲爽</p>
                        <p className="price">¥159.00</p>
                    </li>
                </ul>
            </div>
            {/* 猜你喜欢 */}
            <div className="goods_relevant">
                <div className="header">
                    <i className="icon"></i>
                    <span className="title">猜你喜欢</span>
                </div>
                <ul className="carousel_body">
                    <li className="carousel_item">
                        {list.map(item =>
                        
                            <div className="slider" key={item.id}>
                                <a href="#/">
                                    <img src={item.picture} alt="" />
                                    <p className="name">{item.name}</p>
                                    <p className="price">￥{item.price}</p>
                                </a>
                            </div>
                        )}
                    </li>
                </ul>
            </div>
        </Account>
    )
}